<!-- 添加字典 -->
<template>
  <div class="page-box h100 display-flex czbj">
    <p class="title-label">添加字典</p>
    <div class="kjknsertw">
      <n-tabs type="line" animated @update:value="fdstytyt" v-if="!isbj">
        <n-tab-pane name="1" tab="文本"></n-tab-pane>
        <n-tab-pane name="2" tab="单张图片"> </n-tab-pane>
        <n-tab-pane name="3" tab="多张图片"></n-tab-pane>
        <n-tab-pane name="4" tab="富文本"></n-tab-pane>
        <n-tab-pane name="5" tab="下拉类型"></n-tab-pane>
        <n-tab-pane name="6" tab="多个图文"></n-tab-pane>
        <n-tab-pane name="7" tab="多个视频"></n-tab-pane>
        <n-tab-pane name="8" tab="树、级"></n-tab-pane>
        <n-tab-pane name="9" tab="pdf\docx"></n-tab-pane>
      </n-tabs>
      <n-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120"
        :inline="false"
        size="normal"
        label-placement="left"
        class="mt20"
      >
        <n-grid :cols="24" :x-gap="20" :y-gap="20">
          <n-form-item-gi span="24" label="字典标签:" path="zdkey">
            <n-input
              v-model:value="form.zdkey"
              type="text"
              placeholder="请输入字典标签"
              size="medium"
              clearable
              :disabled="isbj"
            ></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="字典描述:">
            <n-input
              v-model:value="form.sxname"
              type="text"
              placeholder="请输入字典名称"
              size="medium"
              clearable
            ></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="8" label="一行:">
            <div class="display-flex">
              <div>
                <n-input-number
                  v-model:value="form.column"
                  type="text"
                  placeholder=""
                  size="medium"
                ></n-input-number>
              </div>
              <span class="ml10 vertical-center"> 列 </span>
            </div>
          </n-form-item-gi>
          <n-form-item-gi span="8" label="宽:">
            <n-input-number
              v-model:value="form.width"
              type="text"
              placeholder=""
              size="medium"
            ></n-input-number>
          </n-form-item-gi>
          <n-form-item-gi span="8" label="高:">
            <n-input-number
              v-model:value="form.height"
              type="text"
              placeholder=""
              size="medium"
            ></n-input-number>
          </n-form-item-gi>
          <n-form-item-gi
            span="24"
            label="字典内容:"
            path="text"
            v-if="form.type == 1"
          >
            <n-input
              v-model:value="form.text"
              type="textarea"
              placeholder="请输入字典内容"
              size="medium"
              clearable
            ></n-input>
          </n-form-item-gi>
          <n-form-item-gi
            span="24"
            label="字典内容:"
            path="text"
            v-if="form.type == 2"
          >
            <div
              class="logo-context vertical-center"
              @click="photoShowModal = true"
              :style="stylefun(form)"
            >
              <img :src="form.text" class="w100 h100 imgjz" v-if="form.text" />
              <span v-else>点击上传图片</span>
            </div>
          </n-form-item-gi>

          <n-form-item-gi
            span="24"
            label="字典内容:"
            path="text"
            v-if="form.type == 3"
          >
            <div
              class="kjjjmsertwe"
              :style="{
                'grid-template-columns': 'repeat(' + form.column + ', 1fr)',
              }"
            >
              <div
                class="kjjjsertwwx"
                v-for="(item, idx) in jhhjer"
                :key="idx"
                :style="stylefun(form)"
              >
                <img :src="item" />
                <i
                  class="iconfont dx-closefill sfdgdgty"
                  @click="closesert(idx)"
                ></i>
                <div class="jjnxeertrtw vertical-center">
                  <p>
                    <i
                      class="iconfont dx-left cf fz32 b"
                      @click="kjnmse(idx, 1)"
                    >
                    </i>
                    <i
                      class="iconfont dx-right cf fz30 ml10"
                      @click="kjnmse(idx, 2)"
                    >
                    </i>
                  </p>
                </div>
              </div>

              <div
                class="logo-context vertical-center ab"
                @click="photoShowModaler = true"
              >
                <span>点击上传图片</span>
              </div>
            </div>
          </n-form-item-gi>

          <n-form-item-gi
            span="24"
            label="字典内容:"
            path="text"
            v-if="form.type == 4"
          >
            <div class="fwbclass">
              <tinymce ref="tinymceref"></tinymce>
            </div>
          </n-form-item-gi>

          <n-form-item-gi span="24" label="字典内容:" v-if="form.type == 5">
            <n-dynamic-input
              v-model:value="customValue"
              :on-create="onCreate"
              show-sort-button
            >
              <template #create-button-default> 点击添加字典 </template>
              <template #default="{ value }">
                <div style="display: flex; align-items: center; width: 100%">
                  <n-input
                    v-model:value="value.label"
                    placeholder="label"
                    size="medium"
                    clearable
                  ></n-input>
                  <n-input
                    v-model:value="value.value"
                    placeholder="value"
                    size="medium"
                    clearable
                    class="ml20 sdfsdstrt"
                    :style="stylefunw(form)"
                  ></n-input>
                </div>
              </template>
            </n-dynamic-input>
          </n-form-item-gi>

          <n-form-item-gi span="24" label="字典内容:" v-if="form.type == 6">
            <div class="">
              <draggable
                class="jkknkcxeeet"
                :style="{
                  'grid-template-columns': 'repeat(' + form.column + ', 1fr)',
                }"
                v-model="imgtexte"
              >
                <template #item="{ element, index }">
                  <div class="display-flex">
                    <div
                      @click="addImger(element)"
                      class="vertical-center sdfsdfsdrtrtr"
                      :style="stylefun(form)"
                    >
                      <img
                        :src="element.cover"
                        class="fenmjhnwerw cz sz"
                        v-if="element.cover"
                      />
                      <span class="z9 fz14" v-else>点击上传图片</span>
                    </div>
                    <div class="flex-1 ml10">
                      <n-input
                        type="text"
                        v-model:value="element.title"
                        placeholder="标题"
                        size="medium"
                        clearable
                        @change=""
                      ></n-input>
                      <n-input
                        type="text"
                        v-model:value="element.url"
                        placeholder="跳转链接"
                        size="medium"
                        clearable
                        @change=""
                        class="mt10"
                      ></n-input>
                      <n-input
                        type="textarea"
                        v-model:value="element.details"
                        placeholder="详情"
                        size="medium"
                        clearable
                        @change=""
                        class="mt10"
                        :autosize="{ minRows: 4 }"
                      ></n-input>
                    </div>
                    <div
                      class="deklkjnseer vertical-center"
                      @click="delsee(index)"
                    >
                      删除
                    </div>
                  </div>
                </template>
              </draggable>
            </div>
            <div class="addImwen vertical-center mt20" @click="addImglist">
              +点击添加图文
            </div>
          </n-form-item-gi>

          <n-form-item-gi
            span="24"
            label="字典内容:"
            path="text"
            v-if="form.type == 7"
          >
            <draggable
              class="kjjjmsertwe"
              :style="{
                'grid-template-columns': 'repeat(' + form.column + ', 1fr)',
              }"
              v-model="jhhjerVideo"
            >
              <template #item="{ element, index }">
                <div class="kjjjsertwwx" :style="stylefun(form)">
                  <img :src="element.imgurl" />
                  <i
                    class="iconfont dx-closefill sfdgdgty"
                    @click="closeserter(index)"
                  ></i>
                </div>
              </template>
            </draggable>

            <div class="kjjjmsertwe mt10">
              <div
                class="logo-context vertical-center ab"
                @click="photoShowModalsi = true"
              >
                <span>点击上传视频</span>
              </div>
            </div>
          </n-form-item-gi>


          <n-form-item-gi
            span="24"
            label="字典内容:"
            path="text"
            v-if="form.type == 9"
          >
            <!-- <div
              class="logo-context vertical-center"
              @click="photoShowModal = true"
              :style="stylefun(form)"
            >
              <img :src="form.text" class="w100 h100 imgjz" v-if="form.text" />
              <span v-else>点击上传pdf</span>
            </div> -->




            <div class="headPortrait-box vertical-center sz">
                  <n-upload
                    :action="prefixS + 'public/Upimg'"
                    :data="upload"
                    accept=".pdf,.docx"
                    @Finish="getpdf($event)"
                    @before-upload="appload = true"
                  >
                    <n-spin :show="appload" class="w100 h100">
                      <div class="w100 h100 vertical-center">
                        <img
                          src="../../assets/img/pdf.png"
                          class="dsfsdrtryr cz"
                          v-if="form.text"
                        />
                        <i class="iconfont dx-add1 fz30" v-else></i>
                      </div>
                    </n-spin>
                  </n-upload>
                </div>
                <div class="mt5" v-if="form.text">
                  <a
                    :href="form.text"
                    black
                    target="_blank"
                    class="ls mt10"
                  >
                    点击查看
                  </a>
                </div>


          </n-form-item-gi>

          <n-form-item-gi span="24" label="&nbsp;">
            <n-button type="primary" size="medium" @click="handleValidateClick"
              >提交</n-button
            >
            <n-button size="medium" @click="callBack" class="ml20"
              >返回上一页</n-button
            >
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </div>

    <n-modal
      v-model:show="photoShowModal"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>字典图片</div>
      </template>
      <div>
        <photoGallery
          @getImg="getImg"
          :types="'字典图片' + Userid"
        ></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal
      v-model:show="photoShowModaler"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>字典图片</div>
      </template>
      <div>
        <photoGallery
          @getImg="getImger"
          :types="'字典图片' + Userid"
        ></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal
      v-model:show="photoShowModalsan"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>字典图片</div>
      </template>
      <div>
        <photoGallery
          @getImg="getImgsan"
          :types="'字典图片' + Userid"
        ></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModalsan = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImgsan">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal
      v-model:show="photoShowModalsi"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>视频</div>
      </template>
      <div>
        <photoGallery
          @getImg="getImgsi"
          :types="'视频' + Userid"
          accept=".mp4"
        ></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModalsi = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImgsi"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, nextTick } from "vue";
import {
  dxget,
  dxpost,
  qurl,
  hf,
  transferTimeYMD,
  callBack,
  prefixS
} from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
import tinymce from "../../components/util/tinymce.vue";

import Draggable from "vuedraggable";
import { idID } from "naive-ui";
const apiurl = "dxgjAdmin/dxDictionarymanagement";
const roid = localStorage.id;
const formRef = ref();
const tinymceref = ref();
const cz = qurl();
const isbj = ref(false); // 是否为编辑状态
const jhhjer = ref([]);
const jhhjerVideo = ref([]);
const photoShowModal = ref(false);
const photoShowModaler = ref(false);
const photoShowModalsan = ref(false);
const photoShowModalsi = ref(false);
const imgtexte = ref([]);
const customValue = ref([]);
const Userid = ref(localStorage.id);
const appload = ref(false);
const form = ref({
  zdkey: "",
  sxname: "",
  text: "",
  column: 3,
  roleId: localStorage.id,
  type: 1,
  width: "",
  height: "",
});
const kjnmse = (idx, type) => {
  if (type == 1 && idx > 0) {
    [jhhjer.value[idx - 1], jhhjer.value[idx]] = [
      jhhjer.value[idx],
      jhhjer.value[idx - 1],
    ];
  }
  console.log(jhhjer.value.length < idx);
  if (type == 2 && jhhjer.value.length - 1 > idx) {
    [jhhjer.value[idx + 1], jhhjer.value[idx]] = [
      jhhjer.value[idx],
      jhhjer.value[idx + 1],
    ];
  }
};
const rules = {
  zdkey: {
    required: true,
    message: "请输入字典标签",
    trigger: "blur",
  },
  text: {
    required: true,
    message: "请输入字典内容",
    trigger: "blur",
  },
};
const onCreate = () => {
  return {
    label: "",
    value: "",
  };
};
const initData = async () => {
  const { data }: any = await dxget(apiurl, { id: cz.id, roleId: roid });
  if (!data.column) {
    data.column = 3;
  }
  if (!data.width) {
    data.width = 150;
  }
  if (!data.height) {
    data.height = 170;
  }
  form.value = data;
  if (form.value.type == 3) {
    jhhjer.value = form.value.text.split(",");
  }
  if (form.value.type == 4) {
    console.log(data.text);
    nextTick(() => {
      tinymceref.value.setContent(data.text);
    });
  }
  if (form.value.type == 5) {
    customValue.value = JSON.parse(form.value.text);
  }
  if (form.value.type == 6) {
    imgtexte.value = JSON.parse(form.value.text);
  }
  if (form.value.type == 7) {
    jhhjerVideo.value = JSON.parse(form.value.text);
  }
};
const fdstytyt = (e) => {
  form.value.text = "";
  form.value.type = e;
};
let jjnmnxe = "";
const getImg = (data) => {
  jjnmnxe = data;
};
const setImg = () => {
  form.value.text = jjnmnxe;
  photoShowModal.value = false;
};

let jjnmnxeer = "";
const getImger = (data) => {
  jjnmnxeer = data;
};
const setImger = () => {
  jhhjer.value.push(jjnmnxeer);
  photoShowModaler.value = false;
};

const djjher = ref();

let jjnmnxesan = "";
const getImgsan = (data) => {
  jjnmnxesan = data;
};
const setImgsan = () => {
  djjher.value.cover = jjnmnxesan;
  photoShowModalsan.value = false;
};

let jjnmnxesi = "";
const getImgsi = (data) => {
  jjnmnxesi = data;
};
const setImgsi = () => {
  jhhjerVideo.value.push(jjnmnxesi);
  photoShowModalsi.value = false;
};

const addImger = (data) => {
  photoShowModalsan.value = true;
  djjher.value = data;
};

const closesert = (idx) => {
  jhhjer.value.splice(idx, 1);
};
const closeserter = (idx) => {
  jhhjerVideo.value.splice(idx, 1);
};

const handleValidateClick = (e) => {
  e.preventDefault();
  if (form.value.type == 3) {
    form.value.text = jhhjer.value.join(",");
  }
  if (form.value.type == 4) {
    form.value.text = tinymceref.value.getContent().trim();
    form.value.jianjie = tinymceref.value.gettext().trim().slice(0, 300);
  }
  if (form.value.type == 5) {
    form.value.text = JSON.stringify(customValue.value);
  }
  if (form.value.type == 6) {
    form.value.text = JSON.stringify(imgtexte.value);
  }
  if (form.value.type == 7) {
    form.value.text = JSON.stringify(jhhjerVideo.value);
  }

  formRef.value?.validate(async (errors) => {
    if (!errors) {
      const { errno }: any = await dxpost(
        apiurl,
        form.value,
        isbj.value ? "put" : "post"
      );
      if (errno == 0) {
        callBack();
      }
    }
  });
};
nextTick(() => {
  if (cz.id) {
    isbj.value = true;
    initData();
  }
});

const addImglist = () => {
  imgtexte.value.push({
    cover: "",
    title: "",
    url: "",
    details: "",
  });
};
const delsee = (idx) => {
  imgtexte.value.splice(idx, 1);
};
const stylefun = (data) => {
  return {
    width: data.width + "px",
    height: data.height + "px",
  };
};
const stylefunw = (data) => {
  return {
    width: data.width + "px",
  };
};



const getpdf = async ($event) => {
  const responseText = JSON.parse($event.event.currentTarget.responseText);
  console.log(responseText.data.imgurl.split("?")[0]);
  form.value.text = responseText.data.imgurl.split("?")[0];
  appload.value = false;
  window.$message.success("上传成功");
};
</script>
<style scoped>
.page-box {
  overflow: auto;
}
.sdfsdstrt {
  width: 100px;
}

.jkknkcxeeet {
  width: 1400px;
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.fenmjhnwerw {
  object-fit: cover;
  width: 100%;
  height: 100%;
  background: #e0e0e0;
}

.deklkjnseer {
  background: #f8f8f8;
  width: 32px;
  padding: 0 10px;
  cursor: pointer;
}

.sdfsdfsdrtrtr {
  background: #e0e0e0;
  width: 150px;
  cursor: pointer;
}

.addImwen {
  width: 200px;
  height: 170px;
  background: #e0e0e0;
  font-size: 26px;
  cursor: pointer;
}
</style>
